import _ from 'lodash';
import React, {Component} from 'react';
import {ScrollView, StyleSheet, Alert} from 'react-native';
import {
  Avatar,
  AvatarHelper,
  View,
  Text,
  Colors,
  Typography,
  AvatarProps,
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

const star = require('../../assets/icons/star.png');
const onlineColor = Colors.$backgroundSuccessHeavy;
const examples = [
  {title: 'Custom Background', backgroundColor: Colors.violet60},
  {title: 'Empty Avatar with ribbon', ribbonLabel: 'New'},
  {
    title: 'Initials with Color',
    label: 'AD',
    backgroundColor: Colors.$backgroundWarningLight,
    labelColor: Colors.$textMajor,
    ribbonLabel: 'New',
    ribbonStyle: {backgroundColor: Colors.purple30},
  },
  {
    title: 'Initials, badge ("online")',
    label: 'ES',
    badgeProps: {backgroundColor: onlineColor},
  },
  {
    title: 'Image, badge ("away")',
    source: {
      uri: 'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg',
    },
    badgeProps: {size: 10, backgroundColor: Colors.$backgroundWarningHeavy},
    badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition'],
  },

  {
    title: 'Smaller size, Badge ("offline")',
    size: 40,
    source: {
      uri: 'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg',
    },
    badgeProps: {size: 10, backgroundColor: Colors.$backgroundDisabled},
    badgePosition: 'BOTTOM_LEFT' as AvatarProps['badgePosition'],
  },
  {
    title: 'Image with fade in animation',
    size: 60,
    animate: true,
    imageProps: {animationDuration: 1000},
    source: {
      uri: 'https://images.pexels.com/photos/19000252/pexels-photo-19000252.jpeg',
    },
  },
  {
    title: 'Big pimple',
    size: 70,
    backgroundColor: 'red',
    source: {
      uri: 'https://randomuser.me/api/portraits/women/24.jpg',
    },
    badgeProps: {size: 14, borderWidth: 0, backgroundColor: onlineColor},
    badgePosition: 'TOP_LEFT' as AvatarProps['badgePosition'],
  },
  {
    title: 'Icon badge',
    size: 60,
    source: {
      uri: 'https://randomuser.me/api/portraits/women/24.jpg',
    },
    badgeProps: {
      icon: star,
      size: 14,
      borderWidth: 1.5,
      borderColor: Colors.$outlineInverted,
      iconStyle: {backgroundColor: Colors.$backgroundWarningHeavy},
    },
  },
    {
    title: 'Ellipsize mode clip',
    label: 'Ellipsizemodecliptest',
    backgroundColor: Colors.$backgroundWarningLight,
    labelColor: Colors.$textMajor,
    ribbonStyle: {backgroundColor: Colors.purple30},
  },
  {
    title: 'Ellipsize mode head',
    label: 'Ellipsizemodeheadtest',
    backgroundColor: Colors.$backgroundWarningLight,
    labelColor: Colors.$textMajor,
    ribbonStyle: {backgroundColor: Colors.purple30},
    labelEllipsizeMode: 'head'
  },
  {
    title: 'GIF',
    size: 48,
    source: {
      uri: 'https://media.giphy.com/media/3oEdv8elIVRa3daNl6/giphy.gif',
    },
  },
  {
    title: 'Invalid Gravatar (see logs)',
    label: '🤦',
    backgroundColor: Colors.$backgroundNeutralMedium,
    source: {
      uri: 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=404',
    },
    onImageLoadStart: () =>
      console.log('AvatarScreen: Invalid avatar load STARTED...'), // eslint-disable-line
    onImageLoadEnd: () =>
      console.log('AvatarScreen: Invalid avatar load ENDED'), // eslint-disable-line
    onImageLoadError: () =>
      console.log('AvatarScreen: Invalid avatar load FAILED'), // eslint-disable-line
  },
  {
    title: 'Monitored Avatar (see logs)',
    label: '?!',
    backgroundColor: Colors.$backgroundGeneralHeavy,
    source: {
      uri: 'https://static.altomusic.com/media/catalog/product/M/A/MAJ100SBK_0.jpg',
    },
    onImageLoadStart: () =>
      console.log('AvatarScreen: Monitored avatar load STARTED...'), // eslint-disable-line
    onImageLoadEnd: () =>
      console.log('AvatarScreen: Monitored avatar load ENDED'), // eslint-disable-line
  },
  {
    title: 'Empty Gravatar',
    backgroundColor: Colors.$backgroundDangerLight,
    source: {
      uri: 'https://www.gravatar.com/avatar/2497473d558a37020c558bf26e380a7c?d=blank',
    },
  },
  {
    title: 'With custom badge label',
    label: 'LD',
    backgroundColor: Colors.$backgroundDangerLight,
    badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition'],
    badgeProps: {
      label: '+2',
      size: 24,
      borderWidth: 1.5,
      borderColor: Colors.$outlineInverted,
    },
  },
];

export default class AvatarsScreen extends Component {
  onAvatarPress = (item: any) => {
    const {title, source, label} = item;
    const uri = _.get(source, 'uri');
    const isGravatar = !!uri && AvatarHelper.isGravatarUrl(uri);
    const patchedGravatar = isGravatar
      ? AvatarHelper.patchGravatarUrl(uri)
      : undefined;
    const message = `Label: ${label}\n\nImage-source: ${uri}\n\nIs Gravatar: ${isGravatar}\n\n${
      patchedGravatar ? `Patched-uri: ${patchedGravatar}` : ''
    }`;
    Alert.alert(title, message);
  };

  render() {
    return (
      <TestSuite name="Avatar">
        <TestCase itShould="例子:">
          <View padding-20>
            <ScrollView contentContainerStyle={styles.container}>
              {_.map(examples, (example, i) => (
                <View key={i} style={styles.section}>
                  <Text $textDefault style={{...Typography.text80}}>
                    {example.title}
                  </Text>
                  <Avatar
                    containerStyle={{marginVertical: 5}}
                    {...example}
                    onPress={() => this.onAvatarPress(example)}
                  />
                </View>
              ))}
            </ScrollView>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 25,
    backgroundColor: Colors.$backgroundDefault,
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 15,
  },
});
